<template>
  <div class="article">
    <h1>{{getNoticeContent.title}}</h1>
    <div v-html="getNoticeContent.content" class="getNoticeContent"></div>
  </div>
</template>
<script>
import Axios from "axios";
export default {
  data() {
    return {
      getNoticeContent: "",
      indexArr: [],
      id: this.$route.params.id
    };
  },
  created() {
    this.getNotice();
  },
  methods: {
    getNotice() {
      Axios.get("/static/data/notice.json").then(res => {
        res.data.data.forEach(element => {
          this.indexArr.push(element.announcement_id);
        });
        this.indexArr.forEach((element, i) => {
          if (this.indexArr[i] == this.id) {
            this.getNoticeContent = res.data.data[i];
          }
        });
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
.article {
  margin-left: 40px;

  h1 {
    font-size: 22px;
    margin: 15px 0;
    text-align: left;
    text-align: center;
  }

  .getNoticeContent {
    font-size: 16px;
    line-height: 28px;
  }
}
</style>

